<template>
    <div>
        <!-- 用户列表 -->
        <h1>数据报表</h1>
        <!-- 面包屑 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item><a href="#">首页</a></el-breadcrumb-item>
            <el-breadcrumb-item>数据统计</el-breadcrumb-item>
            <el-breadcrumb-item>数据报表</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 卡片 -->
        <el-card class="box-card" id="main">
            
        </el-card>

    </div>
</template>
<script>
import { imglist } from '../request/Api'
import * as echarts from 'echarts';
export default {
    data() {
        return {

        }
    },
    created() {
        imglist().then(res => {
            var chartDom = document.getElementById('main');
            var myChart = echarts.init(chartDom);
            var option;

            option = {
                title: {
                    text: '用户来源'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                legend: res.data.data.legend,
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: res.data.data.xAxis,
                yAxis: res.data.data.yAxis,
                series: res.data.data.series
            };
            option && myChart.setOption(option);
            console.log(res);
        })
        
    },
    mounted() {

    },
}

</script>
<style lang="scss" scoped>
.box-card {
    width: 90%;
    margin: 20px auto;
    height: 70vh;
}
</style>